<template>
  <ea-dialog
    v-bind="$attrs"
    v-on="$listeners"
    width="400px"
    ref="elDialog"
    :title="title"
    :type="type"
    @submit="submit"
    @reset="$refs.form.resetFields()"
    @closed="handleClosed"
  >
    <el-form ref="form" :rules="rules" :model="singleData" label-width="100px">
      <el-form-item label="菜单名称" prop="menuname">
        <el-input
          v-model="singleData.menuname"
          placeholder="请输入菜单名"
        ></el-input>
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input
          v-model="singleData.url"
          placeholder="请输入菜单URL"
        ></el-input>
      </el-form-item>
      <el-form-item label="图标类名" prop="iconclass">
        <el-input
          v-model="singleData.iconclass"
          placeholder="请输入图标class"
        ></el-input>
        <el-link
          href="https://element.eleme.cn/#/zh-CN/component/icon"
          target="_blank"
          >点击选择Element-UI图标
        </el-link>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input
          v-model="singleData.description"
          placeholder="请输入描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnable">
        <el-switch
          v-model="singleData.isEnable"
          :active-value="true"
          :inactive-value="false"
          active-text="启用"
          inactive-text="禁用"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{
        type === "add" ? "添加" : "保存"
      }}</el-button>
      <el-button @click="$refs['form'].resetFields()">重置</el-button>
    </span>
  </ea-dialog>
</template>

<script>
import editAndAdd from "@/mixins/business/editAndAdd";

export default {
  name: "EaMenu",
  mixins: [editAndAdd],
  data() {
    return {
      parentMenu: null,
      singleData: {
        description: "",
        iconclass: "",
        iconurl: "",
        isEnable: false,
        menuid: 0,
        menuname: "",
        parentid: 0,
        url: ""
      },
      rules: {
        url: { required: true, message: "请输入菜单URL" },
        menuname: { required: true, message: "请输入菜单名" },
        iconclass: { required: true, message: "请输入菜单图标class" }
      }
    };
  },
  watch: {
    parentMenu: {
      immediate: true,
      handler(n) {
        n && (this.singleData.parentid = n.id);
      }
    }
  },
  computed: {
    title() {
      if (this.type === "add")
        if (!this.parentMenu) return "添加一级菜单";
        else return `添加【${this.parentMenu.name}】的二级菜单`;
      else return `修改菜单【${this.singleData.menuname}】`;
    }
  },
  methods: {
    handleClosed() {
      this.parentMenu = null;
      this.end();
    },
    handle() {
      if (this.type === "add") this.singleData.menuid = null;
      return this.axios.post("/sys/manage/addOrUpdateMenu", this.singleData);
    }
  }
};
</script>

<style scoped></style>
